<template>
    <vue-editor v-model="content" id="editor"
                useCustomImageHandler  @image-added="handleImageAdded" > </vue-editor>
</template>
<script>
    import Service from '../../../services/common.service'
    export default {
        content: String,

        data() {
            return {
                content: this.value
            };
        },

        watch:{
            value(val, oldValue) {
                this.setCurrentValue(val);
            },
            content(val){
                const me = this;
                me.$emit('input', me.content);
                me.$emit('value', me.content);
            }
        },

        created: function () {

        },

        methods: {
            setCurrentValue(val) {
                this.content = val;
            },
            handleImageAdded(file, Editor, cursorLocation, resetUploader) {
                var formData = new FormData();
                formData.append('file',file);
                formData.append('type',17);
                Service.uploadFile(formData).then(res=>{
                    if(res.data.succeeded){
                        let url = window.localStorage.getItem("editUrl") + 'file/simple/download?fileId='+res.data.data; // Get url from response
                        Editor.insertEmbed(cursorLocation, "image", url);
                        resetUploader();
                        this['$message']({
                            message: '上传成功',
                            type: 'success'
                        });
                    }else{
                        this['$message']({
                            message: '上传失败',
                            type: 'error'
                        });
                    }
                })
            }
        },

        props: {
            value: {
                type: String
            }
        },
    }
</script>
